<template>
  <el-timeline v-if="todos">
    <el-timeline-item v-for="todo in todos" :key="todo.id" placement="top" :timestamp="todo.createTime">
      <el-card>
        <h4>{{ todo.name }}</h4>
        <p>{{ todo.description }}</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import {getTodos} from '@/api/todo'

export default {
  name: 'ProjectTimeLine',
  props: {
    projectId: [String, Number]
  },
  data () {
    return {
      todos: undefined
    }
  },
  methods: {
    init () {
      getTodos(this.projectId).then(res => {
        console.log(res.data)
        this.todos = res.data.sort(function (o1, o2) {
          return Date.parse(o2.createTime) - Date.parse(o1.createTime)
        })
        this.$emit('timelineCounts', this.todos.length)
      }).catch(res => {
        this.$notify.error({
          title: '加载项目待办数据失败',
          message: res.msg
        })
      })
    },
    reset () {
      this.todos = undefined
    },
    refresh () {
      this.reset()
      this.init()
    }
  },
  mounted () {
    if (this.projectId) {
      this.init()
    }
  },
  watch: {
    projectId: {
      handler (newVal, oldVal) {
        this.projectId = newVal
        this.refresh()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
